<template>
  <div>
      <p>路由传参</p>
      <div>路由携带的参数是:{{rData}}</div>
      <p><span @click="tiao('back')">back</span>|<span  @click="tiao('reset')">刷新</span>|<span  @click="tiao('go')">go</span></p>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from 'vue'
import {useRouter,useRoute} from 'vue-router'
export default {
  setup(){
    interface stateData {
        rData:string|null
    }
    let state=reactive({
        rData:''
    })

    //获取路由
    let router=useRouter()
    let route=useRoute()
    state.rData=(route.query.id) as string
    let tiao=(id:string)=>{
       switch (id){
           case 'back':  router.back();break;
           case 'reset':  location.reload();break;
           case 'go':  router.go(-1);break;
           default:console.log(id);break;
       }
    }

    return {...toRefs(state),tiao}
  }
}
</script>

<style>

</style>